<template>
  <div class="addMerchantBox" v-loading="loading">
    <el-button
      class="el-icon-arrow-left"
      size="mini"
      type="primary"
      style="margin-bottom:10px;"
      @click="handBackList"
    >返回</el-button>
    <el-form ref="form" :model="initial_data" :rules="rules">

      <el-form-item label="角色名字" prop="name">
        <el-input v-model="initial_data.name" style="width:300px" placeholder="请输入角色名字"></el-input>
      </el-form-item>

      <el-form-item label="权限" prop="permission">
        <el-select multiple="multiple" style="width:300px" v-model="initial_data.permission" placeholder="请选择权限（可多选）">
          <el-option
            v-for="(item) in permissionsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <div class="submitBtnBox">
      <el-button class="submitBtn" @click="submitFn" type="primary">确认添加</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "permission-addUser",
  components: {},
  data() {
    return {
      initial_data: {
        //获取初始数据
        token: localStorage.getItem("user_token"), //token
        name: "",
        permission: [],
      },
      permissionsList: [],
      loading: false,
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        permission: [
          { required: true, message: "请选择权限", trigger: "blur" }
        ]
      }
    };
  },
  watch: {},
  methods: {
    //获取下拉权限节点
    getPermissions() {
      this.$http
        .get("/web/user/permissions/list", {
          params: {
            token: localStorage.getItem("user_token"),
            pageSize: 999
          }
        })
        .then(response => {
          console.log(response)
          if (response.data.status == "success") {
            this.permissionsList = response.data.data.list;
          }
        })
        .catch(error => {
          console.log("error:", error);
        });
    },

    handBackList() {
      this.$router.push({ name: "permissionRoles" });
    },

    submitFn() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        } else {
          this.loading = true;
          this.$nextTick(() => {
            this.$http.post("/web/user/roles/add", this.initial_data).then(response => {
                if (response.data.status == "success") {
                  this.$message({
                    message: "添加成功",
                    duration: 6000
                  });

                  this.$router.push({
                    name: "permissionRoles"
                  });
                } else {
                  this.$message({
                    message: "添加失败，原因：" + response.data.failedMsg,
                    duration: 6000
                  });
                }
                this.loading = false;
              })
              .catch(error => {
                this.$message({
                  message: "添加失败，原因：" + error,
                  duration: 6000
                });
                this.loading = false;
              });
          });
        }
      });
    }
  },
  mounted() {
    this.getPermissions();
  }
};
</script>

<style scoped lang="scss">
@import "./roles.scss";
</style>
